import React from 'react';
import { Link } from 'react-router';

class Video extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Video';
        // mode 表示 是在正在直播 ／往期精彩
        // 0 正在直播
        // 1 往期精彩
        this.state= {
            mode: props.mode,
            // 过去的精彩的视频
            // videoList : props.history,
            videoList: [
                {
                    title: " 东北联赛",
                    sub: "最精彩的桨板球比赛",
                    iframe: '<iframe frameBorder="0"  src="http://v.qq.com/iframe/player.html?vid=a0015j9qmf2&tiny=0&auto=0" allowFullScreen></iframe>'
                },
                {
                    title: " 东北联赛",
                    sub: "最精彩的桨板球比赛",
                    iframe: '<iframe frameBorder="0"  src="http://v.qq.com/iframe/player.html?vid=a0015j9qmf2&tiny=0&auto=0" allowFullScreen></iframe>'
                },
                {
                    title: " 东北联赛",
                    sub: "最精彩的桨板球比赛",
                    iframe: '<iframe frameBorder="0"  src="http://v.qq.com/iframe/player.html?vid=a0015j9qmf2&tiny=0&auto=0" allowFullScreen></iframe>'
                }
            ],

            // 正在直播的
            // videosLive: props.live,
            videosLive: [
                {
                    club1: {
                        logo: "",
                        name: "",
                    },
                    club2: {
                        logo: "",
                        name: "",
                    },
                    time: {
                        datetime: ""
                    },
                    links: [
                    ]
                },
                {
                    club1: {
                        logo: "",
                        name: "东北第一",
                    },
                    club2: {
                        logo: "",
                        name: "沈阳大圣",
                    },
                    time: {
                        datetime: "07:00"
                    },
                    links: [
                        'http://v.qq.com/x/cover/slu2iapi5vnct1z.html',
                        'http://v.qq.com/x/cover/slu2iapi5vnct1z.html',
                        'http://v.qq.com/x/cover/slu2iapi5vnct1z.html',
                        'http://v.qq.com/x/cover/slu2iapi5vnct1z.html'
                    ]
                }
            ],
        }
    }

    setIframe(mode ) {
            let iframeLi = $(".video>ul.videosUl li");
            let videoList = this.state.videoList;
            console.log( "setIframe");
            console.log( "***************************");

        if( "1" == mode && 0 == iframeLi.has("iframe").length && 0 == $(".video").has(".goingList").length ) {

            iframeLi.each(function( index, iframe){
                console.log(index);
                console.log( videoList[index].iframe );
                if( 0==index ){
                    $(this).append( videoList[index].iframe );
                } else {
                    $(this).prepend( videoList[index].iframe );
                }
            });
        };
    }

    componentWillMount() {

    }

    componentDidMount() {
        this.setIframe(this.state.mode);
    }

    componentWillReceiveProps(nextProps) {
        console.log(" component Will Receive Props");

        this.setState({
            mode: nextProps.mode,
            videosLive: nextProps.live,
            // videoList: nextProps.history

        });
        // this.setIframe().bind(this);
        // this.setIframe(this.state.mode).bind(this);
    }

    componentWillUpdate(nextProps, nextState) {
        console.log(" component Will Update");
        let iframeLi = $(".video>ul.videosUl li");
          console.log( iframeLi );
        // this.setIframe(this.state.mode);
    }

    componentDidUpdate(prevProps, prevState) {
          let iframeLi = $(".video>ul.videosUl li");
        this.setIframe(this.state.mode);
    }

    render() {
        let videoLists = this.state.videoList.map(function( video, index ){
            return (
                <li key={index}>
                    <p className="videoTitle">
                    {video.title}
                        <span>
                            {video.sub}
                        </span>
                    </p>
                </li>
            )
        });

        let videoGoings = this.state.videosLive.map((info, index ) => {
            let links = info.links.map((link, idx ) => {
                return (
                    <a key={idx} href={link}  >直播链接 {idx+1} </a>
                )
            });

            console.log( info );

            return(
                 <li key={index}>
                     <div className="going">
                        <div className="vsBlock">
                            <img className="clubLogo" src={info.club1.logo}/>
                            <p >
                                {info.club1.name}
                            </p>
                        </div>
                        <p className="vsInfo">
                            vs
                            <span>开始时间{info.time.datetime}
                            </span>
                        </p>
                        <div className="vsBlock">
                            <img className="clubLogo" src={info.club2.logo}/>
                            <p>
                                {info.club2.name}
                            </p>
                        </div>
                    </div>

                    <div className="buttonList">
                        {links}
                    </div>
                </li>
            )
        } )

        let modeChange = function( mode ){
            console.log( "modeChange");
            if( 0== mode ) {
                console.log(mode);
                if( 0 == this.state.videosLive.length){

                    return (
                        <p className="noVideo">现在还没有直播哦
                            <span>
                                点击 "往期精彩" 更多视频等着你
                            </span>
                        </p>
                    );
                } else {
                    return (
                        <ul className= "goingList">
                            {videoGoings}
                        </ul>
                    );
                }
            } else {
                console.log( mode);

                return (
                    <ul className= "videosUl">
                        {videoLists}
                    </ul>
                    );
            }
        }.bind(this)

        return(
            <div className="video">
                {modeChange( this.state.mode)}
            </div>
            );
    }
}
export default Video;
